<template>
  <div class="waterUseCurveAnalysis">
    <!-- 阶梯用水曲线分析 柱状图 -->
    <div
      id="curveAnalysisUseWatermain"
      ref="chart1"
      :style="{ height: `300px`, width: `100%` }"
    ></div>
  </div>
</template>
<script>
const echarts = require("echarts");
import {
  salesStatistics,
  // flUseWaterYearWideTable
} from "@/api/baseManage/flMaintain/index";
import { flUseWaterYearWideTable } from "@/api/waterAnalysis/flWaterMeterRecord/index";
// C:\Users\62751\Desktop\front\src\api\waterAnalysis\flWaterMeterRecord
export default {
  props: ["userCode", "waterNo", "echartsData"],
  name: "waterUseCurveAnalysis",
  data() {
    return {
      echarts: "",
      waterData: [],
    };
  },
  methods: {
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(document.getElementById("curveAnalysisUseWatermain"));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          // 触发类型触发类型：axis柱状图，折线图
          trigger: "axis",
          // 指示器类型
          axisPointer: {
            // 指示器类型 cross 十字准星指示器  line直线指示器
            type: "line",
            // 直线颜色
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          // 各工具配置项。
          feature: {
            // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            // dataView: {show: true, readOnly: false},
            // 动态类型切换 'line'（切换为折线图） 'bar'（切换为柱状图）
            // magicType: {show: true, type: ['line', 'bar']},
            // 开启配置项还原
            // restore: {show: true},
          },
        },
        legend: {
          data: ["用水量"],
        },
        xAxis: [
          {
            // 坐标轴类型
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              // 阴影指示器
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            //  数值轴，适用于连续数据。
            type: "value",
            name: "用水量(平方米)",
            min: 0,
            max: "dataMax",
            // 强制设置坐标轴分割间隔
            interval: 300,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "用水量",
            // 格式  'line'（切换为折线图） 'bar'（切换为柱状图）
            type: "line",
            showBackground: true,
            data: this.waterData,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option);
    },
    // 获取柱状图水量
    async getWaterData() {
      let resArray = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "500"];
      let resArr = [];
      if (this.userCode) {
        let userCode = this.userCode;
        let waterNo = this.waterNo;
        let Obj = {
          userCode: userCode,
          waterNo: waterNo,
        };
        console.log(Obj, "请求传的参数888");
        const res = await flUseWaterYearWideTable(Obj);
        console.log(res.data, "请求返回的数据data");
        let dataq = res.data;
        let ArrObj = res.data[0];

        var arr = JSON.stringify(dataq)
          .split('"year":"2020",')[1]
          .split(',"total":0')[0]
          .split(",");
        for (var i = 0; i < arr.length; i++) {
          resArr.push(arr[i].split(":")[1]);
        }
        console.log(resArr, 88888888888);
      }

      resArray = resArr;
      console.log(resArray, "用水量数据");

      this.echarts.setOption({});
      this.echarts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            crossStyle: {
              color: "#999",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "水量(平方米)",
            min: 0,
            max: "dataMax",
            interval: 300,
            axisLabel: {
              formatter: "{value}",
            },
          },
          // {
          //     type: 'value',
          //     name: '',
          //     min: 0,
          //     max: 'dataMax',
          //     interval: 300,
          //     axisLabel: {
          //         formatter: ''
          //     }
          // }
        ],
        series: [
          {
            name: "用水量",
            type: "line",
            showBackground: true,
            data: resArray,
          },
          // {
          //     name: '水度',
          //     type: 'line',
          //     yAxisIndex: 1,
          //     data: waterDa
          // }
        ],
      });
    },
  },
  mounted() {
    this.createEcharts();
    this.getWaterData();
    window.onresize = () => {
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(this.$refs.chart1);
      myChart1.resize();
    };
  },
  created() {
    // this.getWaterData()
  },
  watch: {
    userCode: {
      deep: true,
      handler(newValue, oldValue) {
        this.userCode = newValue;
      },
    },
    waterNo: {
      deep: true,
      handler(newValue, oldValue) {
        this.waterNo = newValue;
      },
    },
    echartsData: {
      deep: true,
      handler(newValue, oldValue) {
        this.echartsData = newValue;
      },
    },
  },
};
</script>
